Dialogs Guidelines 對話方塊指導規則
Usage 用法
對話方塊是螢幕上彈出的提示視窗。它有兩個主要作用:顯示重要資訊,或讓你做個選擇。你必須先處理對話方塊,才能做其他事情。由於對話方塊會影響使用者操作,我們應該少用它。如果可以用選單來解決,就選擇用選單,這樣對使用者更友好。
Similar components 類似元件
Snackbar 也用於顯示重要訊息。根據資訊的重要性選擇合適的元件。這種元件訊息傳遞策略有助於避免過度使用對話方塊。

| omponent 元件 | Importance 重要性 | Action needed 需要採取行動 |
| Snackbar 提示欄 | Low importance 低重要性 | Snackbars 可能沒有按鈕, 並且可以自動消失 |
| Dialog 對話方塊 | High importance 高重要性 | 對話方塊會阻止主內容,直到確認操作 |
Anatomy 結構
Basic dialog 基本對話方塊

Full-screen dialog 全屏對話方塊

Container and scrim 容器與遮罩
對話方塊會顯示在螢幕最上層,裡面有標題、內容、按鈕等內容。當對話方塊出現時,其他內容會被一層灰色遮罩蓋住,這樣可以幫助使用者把注意力放在對話方塊上。

Headline (optional) 標題(可選)
標題和按鈕要清楚說明對話方塊的用途。標題要用簡單直接的語言,說明要做什麼或詢問問題。不要使用這些說法:
- "抱歉打擾了"這樣的道歉語
- "警告!"這樣的過度警示
- "你確定嗎?"這樣不明確的問題
標題應始終簡潔明瞭。如有必要,可以換行到第二行,並可以截斷。在全屏對話方塊中,較長的標題或長度不固定的標題(如翻譯),可以放在內容區域而不是應用欄中。
Buttons (label text) 按鈕(標籤文字)
對話方塊中的按鈕讓使用者可以確認或關閉操作。按鈕靠對話方塊尾部對齊,確認按鈕位於最邊緣。此佈局會自動適應從右到左的語言。
對話方塊最多應包含兩個操作。如果只提供一個操作,則必須是一個確認操作,如果提供兩個操作,其中一個必須是確認操作,另一個是取消操作
不要在對話方塊里加第三個按鈕(比如"瞭解更多")。這樣的按鈕會讓使用者離開對話方塊,沒法完成當前任務。如果你想展示更多資訊,可以直接把資訊放在對話方塊裡。如果資訊太多,最好在使用者開啟對話方塊之前就告訴他們。

Basic dialog 基本對話方塊
基本對話方塊會在需要時打斷使用者,用來顯示重要訊息或讓使用者做選擇。它主要用在三種情況:顯示警報訊息、讓使用者快速選擇,或確認某個操作。
基本對話方塊通常以警告或列表的形式出現,但也可能使用各種佈局和元件組合,包括列表、日期選擇器和時間選擇器。
Full-screen dialog 全屏對話方塊
全屏對話方塊佔據整個手機螢幕。它主要用來處理需要多個步驟的操作,比如當你想新增一個日曆活動時,需要填寫多項資訊。它有個特別之處:它是唯一可以在其中開啟其他對話方塊的型別。你還可以透過點選浮動按鈕(FAB)讓它展開成全屏對話方塊。
當全屏對話方塊在未儲存的情況下關閉時,其前方會出現一個基本對話方塊,用於確認是否放棄選擇而不儲存更改。
什麼時候用全屏對話方塊?以下情況可以考慮:
- 需要使用者透過鍵盤輸入大量資訊或複雜資料的情況(比如填寫表格、建立個人資料或編輯詳細設定)
- 使用者做的修改需要多個步驟才能完成,或者這些修改不能立即自動儲存到系統中
- 任務流程比較複雜,可能需要在當前對話方塊中開啟其他對話方塊來完成額外的操作或確認
要注意的是,全屏對話方塊只適合在手機這樣的小螢幕裝置上使用。如果是在平板電腦或電腦這樣的大螢幕上,就應該用普通的對話方塊。
儲存更改 Saving Changes
在全屏對話方塊裡儲存修改很簡單:點選"儲存"按鈕就可以了。如果想取消修改,點選左上角的"X"或"返回"按鈕即可。
確認操作 Confirmation
在填完所有必要資訊之前,"儲存"按鈕是不能點選的。
- 按鈕上的文字要具體說明操作:“Save,” “Send,” “Share,” “Update,” or “Create.”儲存、傳送、分享、更新、建立
- 不要用模糊的詞:比如“Done,” “OK” or “Close.”"完成"、"確定"或"關閉"。
如果你沒有做任何修改就關閉對話方塊,它會直接關閉。但是如果你做了修改,系統會問你是否確定要放棄這些修改。

Dialog windows 對話方塊視窗
當你開啟全屏對話方塊時,其他選單和對話方塊仍然可以顯示在它的上面。這些新開啟的對話方塊會佔據整個螢幕,而不是以小視窗的形式顯示。
Navigation 導航
全屏對話方塊頂部應用欄中的關閉"X"按鈕是唯一的導航選項,因為使用者只能完成、取消或關閉對話方塊。
Responsive layout 響應式佈局
對話方塊可以根據視窗大小類的變化而切換型別。例如,全屏對話方塊在較大的斷點處可以變為基本對話方塊。

Medium window size 中等視窗大小
基本對話方塊預設出現在中心位置,但可以覆蓋其位置以提供更符合人體工程學的體驗。

Expanded window size 擴充套件視窗大小
在大螢幕(比如電腦桌面)上,對話方塊會顯示在半透明的背景層上面。這樣設計可以讓對話方塊更顯眼,幫助使用者注意到需要處理的內容。

Behavior 行為
Appearing 出現
對話方塊會突然出現在螢幕上,讓使用者必須先處理它才能繼續其他操作。由於這會打斷使用者的工作,所以要小心使用。不是所有設定或選擇都需要用對話方塊。對話方塊開啟和關閉時會有動畫效果。
Position 位置
對話方塊在關閉或採取操作(如選擇設定)之前會保持焦點。它們不應被其他元素遮擋或部分顯示在螢幕上,全屏對話方塊除外。

Scrolling 滾動
儘量不要讓對話方塊的內容需要滾動。如果內容必須滾動,請記住:
- 對話方塊標題要固定在頂部不動
- 按鈕要固定在底部不動,這樣使用者滾動時可以同時看到標題和按鈕
- 只有對話方塊裡面的內容會滾動,對話方塊外面的背景是不會跟著滾動的
Interaction & style 互動與樣式
對話方塊會打斷使用者正在做的事情。它會跳到螢幕最前面,暫停使用者的操作,包括那些正在使用讀屏軟體的使用者。正因為對話方塊會影響使用者體驗,我們應該只在顯示重要資訊時才使用它。如果是不那麼重要的資訊,最好用其他方式顯示,不要打斷使用者。

















